<template>
  <div class="volunteer">
    <div class="head">
      <i class="iconfont head-icon" @click="comeBack">&#xe689;</i>
      志愿者申请
    </div>
    <div class="content">
      <group title="">
        <x-input title='志愿所在地址：' disabled v-model="list.volunteerLocal"></x-input>
      </group>
      <group title="">
        <x-input title='志愿服务时间：' disabled v-model="list.volunteerTime"></x-input>
      </group>
      <group title="">
        <x-input title='姓名：' placeholder="请输入您的姓名" v-model="list.name"></x-input>
      </group>
      <group title="">
        <div class="sexC">
          <div style="float: left;line-height: 22px">
            性别：
          </div>
          <div style="float: left;line-height: 20px">
            <check-icon :value.sync="sex1">男</check-icon>
            <check-icon :value.sync="sex2">女</check-icon>
          </div>

        </div>
      </group>
      <group title="">
        <x-input :min="1" :max="3" ref="nl" type="number" title='年龄：' placeholder="请输入您的年龄" v-model="list.age"></x-input>
      </group>
      <group title="">
        <x-input title='民族：' placeholder="请输入您的民族" v-model="list.nation"></x-input>
      </group>
      <group title="">
        <x-input title='身份证号：' ref="sfz" placeholder="请输入您的身份证号" v-model="list.idCardNum" :is-type="sfzyanzhen"></x-input>
      </group>
      <group title="">
        <div class="sexC">
          <div style="float: left;line-height: 22px">
            政治面貌：
          </div>

          <div style="float: left;line-height: 20px">
            <check-icon :value.sync="political1">群众</check-icon>
            <check-icon :value.sync="political2">团员</check-icon>
            <check-icon :value.sync="political3">党员</check-icon>
          </div>
        </div>
      </group>
      <group title="">
        <x-input title='籍贯：' placeholder="请输入您的籍贯" v-model="list.local"></x-input>
      </group>
      <group title="">
        <x-input title='所在单位：' placeholder="请输入您所在的单位" v-model="list.campany"></x-input>
      </group>
      <group title="">
        <x-input title='手机号：' ref="sjh" placeholder="请输入您的手机号" v-model="list.mobile" is-type="china-mobile"></x-input>
      </group>
      <group title="">
        <x-input title='固定电话：' placeholder="请输入您的固定电话（选填）" v-model="list.telphone"></x-input>
      </group>
      <group title="">
        <x-input title='具体地址：' placeholder="请输入您的具体地址" v-model="list.address"></x-input>
      </group>
      <group title="">
        <x-input title='志愿者注册号：' placeholder="志愿者注册号（选填）" v-model="list.volunteerNo"></x-input>
      </group>
      <group title="">
        <x-input title='志愿者服务时长：' placeholder="志愿服务时长（选填）" v-model="list.volunteerTotalTime"></x-input>
      </group>
      <div class="clue-list-two">
        <ul>
          <li>
            <p>个人照片：</p>
            <div class="file-content">
              <el-upload
                class="avatar-uploader"
                :action="imageHttp"
                name="imgFile"
                :show-file-list="false"
                :on-success="handleAvatarSuccessz"
                :before-upload="beforeAvatarUpload"
                :on-error="handleAvatarError"
                :on-progress="handleAvatarPorgress">
                <img v-if="list.headUrl" :src="imageUrl.imageUrl + list.headUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <h4></h4>
              </el-upload>
            </div>
          </li>
        </ul>
      </div>
      <group title="">
        <x-textarea title="个人特长：" placeholder="请输入您的个人特长（选填）" v-model="list.talent" :show-counter="false" :height="200" :rows="8" :cols="30"></x-textarea>
      </group>
      <group title="">
        <x-textarea title="所获荣誉：" placeholder="请输入您所获荣誉（选填）" v-model="list.award" :show-counter="false" :height="200" :rows="8" :cols="30"></x-textarea>
      </group>
    </div>
    <div @click="priment" class="okbtn">
      确认报名
    </div>
  </div>
</template>
<style lang="scss" src="./volunteer.scss"></style>
<script src="./volunteer.js"></script>
